<template>
    <div>
        <el-container>
            <el-container>
                
                <el-aside width="200px">
                    <el-scrollbar height="650px">
                        <TreeCommponent v-if="oneTableData != null" :treeData="oneTableData"
                            @treeComponent="treeComponent" :defaultExpandAll="true" :showCheckBox="false">
                        </TreeCommponent>
                    </el-scrollbar>
                </el-aside>
                <el-main>
                    <el-space>
                        <el-form-item label="题目类型">
                            <el-select v-model="selectValueAndModel" placeholder="没有选择" @change="changeMethod1">
                                <el-option label="全部" :value="0" />
                                <el-option
                                    v-for="item in store.state.questionBank.subjectModel.subjectPagination.subjectTypeList"
                                    :key="item.subjectTypeId" :label="item.subjectTypeName"
                                    :value="item.subjectTypeId" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="发布">
                            <el-select v-model="statusValueAndModel" placeholder="没有选择" @change="changeMethod2">
                                <el-option label="全部" :value="0" />
                                <el-option label="已发布" :value="1" />
                                <el-option label="待发布" :value="2" />
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <MyUpload></MyUpload>
                        </el-form-item>
                        <el-form-item>
                            <MyOneAddSubject></MyOneAddSubject>
                        </el-form-item>
                        <el-form-item>
                            <MyListStatusComponent></MyListStatusComponent>
                        </el-form-item>
                        <el-form-item>
                            <MyListDeleteComponent></MyListDeleteComponent>
                        </el-form-item>
                    </el-space>
                    <table-compone-page v-loading.fullscreen.lock="loadingShow"></table-compone-page>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import { onMounted, ref } from '@vue/runtime-core'
import { useStore } from 'vuex'
import axios from 'axios';
import TreeCommponent from '../../ReuseComponent/TreeCommponent.vue';
import TableComponePage from '../useCompone/TableComponePage.vue';
import MyUpload from '../useCompone/MyUpload.vue';
import MyOneAddSubject from '../useCompone/MyOneAddSubject.vue';
import MyListStatusComponent from '../useCompone/MyListStatusComponent.vue';
import MyListDeleteComponent from '../useCompone/MyListDeleteComponent.vue';
export default {
  components: { TreeCommponent, TableComponePage, MyUpload, MyOneAddSubject, MyListStatusComponent, MyListDeleteComponent },
    setup(){
        //加载
        let loadingShow = ref(false)
        const store = useStore();
        //组件挂载后从后台数据库获取数据并放到vuex中
        let oneTableData = ref(null)//树形数据
        onMounted(()=>{
            loadingShow.value = true
            axios.get("/api/subject/initializationSubjectPage",{
                params:{
                    subjectTypeId:store.state.questionBank.subjectModel.subjectPagination.subjectTypeId,
                   accountTypeId:store.state.questionBank.subjectModel.subjectPagination.accountTypeId,
                   status:store.state.questionBank.subjectModel.subjectPagination.status,
                   pageNumber:store.state.questionBank.subjectModel.subjectPagination.pageNum,
                   pageSize:store.state.questionBank.subjectModel.subjectPagination.pageSize
                }
            }).then((response)=>{
                if(response.status == 200){
                    if(response.data.code == 200){
                        store.commit('insertSubjectPageTreeData',response.data.data.account.data)
                        store.commit('selectSubjectTableData',response.data.data.subject.list)
                        store.commit('selectSubjectTableTotal',response.data.data.subject.total)
                        store.commit('selectSubjectTypeList',response.data.data.subject_type)
                        oneTableData.value = response.data.data.account.data
                    }
                }
            }).finally(()=>{
                loadingShow.value = false
            })
        })
        //查询题目时的题目类型，默认为空
        //let subjectTypeId = ref(null)
        //表格显示控制属性
        let tableShow = ref(false)
        //树节点点击传回当前点击的行业类型
        function treeComponent(a){

            store.commit('selectSubjectTablePageNum',1)
            if(!a.level){
                loadingShow.value = true
                axios.get("/api/subject/selectSubject",{
                params:{
                   subjectTypeId: store.state.questionBank.subjectModel.subjectPagination.subjectTypeId,
                   accountTypeId: a.industryId,
                   status:store.state.questionBank.subjectModel.subjectPagination.status,
                   pageNumber:store.state.questionBank.subjectModel.subjectPagination.pageNum,
                   pageSize:store.state.questionBank.subjectModel.subjectPagination.pageSize
                }
            }).then((response)=>{
                if(response.status == 200){
                    if(response.data.code == 200){
                        //console.log(response.data.data.list)
                      store.commit('selectSubjectTableData',response.data.data.list)//设置数据
                      store.commit('selectSubjectTableTotal',response.data.data.total)//设置总数
                      store.commit('selectAccountTypeId',a.industryId)//设置题目的类型
                      //selectValueAndModel.value = store.state.questionBank.subjectModel.subjectPagination.subjectTypeList[0]
                    }
                }
            }).finally(()=>{
                loadingShow.value = false
            })
             //打开表格
            tableShow.value = true
            }

        }
        //题目类型
        let selectValueAndModel = ref(0)
        //题目类型选择器值发生改变时
        function changeMethod1(a){
            loadingShow.value = true
            store.commit('selectSubjectTablePageNum',1)
            store.commit('selectSubjectTypeId',a)
            axios.get("/api/subject/selectSubject",{
                params:{
                   subjectTypeId:store.state.questionBank.subjectModel.subjectPagination.subjectTypeId,
                   accountTypeId:store.state.questionBank.subjectModel.subjectPagination.accountTypeId,
                   status:store.state.questionBank.subjectModel.subjectPagination.status,
                   pageNumber:store.state.questionBank.subjectModel.subjectPagination.pageNum,
                   pageSize:store.state.questionBank.subjectModel.subjectPagination.pageSize
                }
            }).then((response)=>{
                if(response.status == 200){
                    if(response.data.code == 200){
                      store.commit('selectSubjectTableData',response.data.data.list)
                      store.commit('selectSubjectTableTotal',response.data.data.total) 
                    }
                }
            }).finally(()=>{
                loadingShow.value = false
            })

        }
        //发布和未发布
        let statusValueAndModel = ref(0)
        //发布状态选择器值发生改变时
        function changeMethod2(a){
            loadingShow.value = true
            store.commit('selectSubjectTablePageNum',1)
            store.commit('selectSubjectStatus',a)
            axios.get("/api/subject/selectSubject",{
                params:{
                   subjectTypeId:store.state.questionBank.subjectModel.subjectPagination.subjectTypeId,
                   accountTypeId:store.state.questionBank.subjectModel.subjectPagination.accountTypeId,
                   status:store.state.questionBank.subjectModel.subjectPagination.status,
                   pageNumber:store.state.questionBank.subjectModel.subjectPagination.pageNum,
                   pageSize:store.state.questionBank.subjectModel.subjectPagination.pageSize
                }
            }).then((response)=>{
                if(response.status == 200){
                    if(response.data.code == 200){
                      store.commit('selectSubjectTableData',response.data.data.list)
                      store.commit('selectSubjectTableTotal',response.data.data.total) 
                    }
                }
            }).finally(()=>{
                loadingShow.value = false
            })

        }
        return {
            oneTableData,
            treeComponent,
            tableShow,
            store,
            selectValueAndModel,
            statusValueAndModel,
            changeMethod1,
            changeMethod2,
            loadingShow
        }
        

    }
}
</script>

<style>

</style>